// 柱状图1模块
(function() {
  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  option = {

    legend: {
        show: true,
        top: "40%",
        left: "75%",
        itemStyle: {
            color: "#4CF9F5"
        },
        textStyle: {
            color: "#3A5173"
        },
        formatter: function (name) {
            let data = [{
                    value: 150,
                    name: "离线设备"
                },
                {
                    value: 1030,
                    name: "在线设备"
                }
            ]
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
                tarValue = data[i].value;
            }
            let arr = [
                name + tarValue
            ]
            return arr.join('')
        },

    },
    graphic: [{
        type: 'text',
        top: '36%',
        left: 'center',
        style: {
            text: '总设备',
            fill: '#2A4572',
            fontSize: 16,
            fontWeight: 'normal'
        }
    }, {
        type: 'text',
        top: '45%',
        left: 'center',
        style: {
            text: '1180',
            fill: 'white',
            fontSize: 30,
            fontWeight: 'bold'
        }
    }],
    series: [{
        name: "全网设备统计",
        type: "pie",
        // center: ["50%", "42%"],
        radius: ["60%", "90%"],
        color: [
            "#798FA4",
            "#65F3F5"
        ],
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        data: [{
                value: 150,
                name: "离线设备"
            },
            {
                value: 1030,
                name: "在线设备"
            }
        ]
    }]
};


  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  // 数据变化
  var dataAll = [
    { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
    { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
  ];

  $(".bar h2 ").on("click", "a", function() {
    option.series[0].data = dataAll[$(this).index()].data;
    myChart.setOption(option);
  });
})();

// 折线图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line .chart"));

  var data = [96, 85, 72, 30, 19];
  var titlename = ["设备1", "设备2", "设备3", "设备4", "设备5"];
  var valdata = [702, 350, 610, 793, 664];
  var myColor = ["#AD2D3A", "#FFD439", "#F8DA24", "#65C3DC", "#58ECEE"];
  option = {
    //图标位置
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#fff",

          rich: {
            lg: {
              backgroundColor: "#339911",
              color: "#fff",
              borderRadius: 15,
              // padding: 5,
              align: "center",
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: false,
        inverse: false,
        data: valdata,
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: data,
        barCategoryGap: 50,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: function(params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: "inside",
            formatter: "{c}%"
          }
        }
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        barCategoryGap: 50,
        data: [100, 100, 100, 100, 100],
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
          }
        }
      }
    ]
  };

  // 3. 把配置和数据给实例对象
  myChart.setOption(option);

  // 重新把配置好的新数据给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 饼形图定制
// 折线图定制
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".pie .chart"));

  option = {
    legend: { // 图例组件不显示
      show: false
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    graphic: [{
      type: 'text',
      top: '40%',
      left: 'center',
      style: {
        text: '总共',
        fill: '#2A4572',
        fontSize: 16,
        fontWeight: 'normal'
      }
    }, {
      type: 'text',
      top: '48%',
      left: 'center',
      style: {
        text: '36',
        fill: 'white',
        fontSize: 30,
        fontWeight: 'bold'
      }
    }],

    series: [{
      name: '总数36',
      radius: ['40%', '70%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。
      type: 'pie',
      label: {
        color: "rgba(247, 243, 243, 1)",
          //显示的标签的内容a（系列名称），b（数据项名称），c（数值）, d（百分比）
          formatter: "{b}   {c}",
        
      },
      labelLine: {
        show: true, //是否显示引导线
        length: 20, //百分比引导线
        length2: 20 //视觉引导项第二段的长度。
      },
      data: [{
          value: 6,
          name: '线路故障'
        },
        {
          value: 9,
          name: '超时'
        },
        {
          value: 9,
          name: '故障'
        },
        {
          value: 5,
          name: '机器某率'
        },
        {
          value: 5,
          name: '抖动'
        }

      ]
    }],

  };
  
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();
// 学习进度柱状图模块
(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".bar1 .chart"));

  option = {
    title: {
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        type: "plain"
    },

    graphic: [{
        type: 'text',
        top: '40%',
        left: '22%',
        style: {
            text: '总共',
            fill: '#2A4572',
            fontSize: 16,
            fontWeight: 'normal'
        }
    }, {
        type: 'text',
        top: '48%',
        left: '22%',
        style: {
            text: '26',
            fill: 'white',
            fontSize: 30,
            fontWeight: 'bold'
        }
    }],
    legend: {
        show: true,
        left: "80%",
        top: "40%",
        formatter: function (name) {
            let data = [{
                    value: 4,
                    name: '一般'
                },
                {
                    value: 6,
                    name: '正常'
                },
                {
                    value: 7,
                    name: '严重'
                },
                {
                    value: 8,
                    name: '紧急'
                }
            ]
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
                tarValue = data[i].value;
            }
            let arr = [
                name + '  ' + tarValue + '个'
            ]
            return arr.join('')
        },
        textStyle: {
            color: "rgba(211, 32, 32, 1)"
        }

    },

    series: [{
        name: '半径模式',
        type: 'pie',
        radius: [80, 140],
        center: ['25%', '50%'],
        roseType: 'radius',
        itemStyle: {
            borderRadius: 5
        },
        label: {
            show: false
        },
        emphasis: {
            label: {
                show: true
            }
        },

        data: [{
                value: 4,
                name: '一般'
            },
            {
                value: 6,
                name: '正常'
            },
            {
                value: 7,
                name: '严重'
            },
            {
                value: 8,
                name: '紧急'
            }
        ]
    }]
};


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();


(function() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.querySelector(".line1 .chart"));

 
  var data = [96, 85, 72, 30, 19];
  var titlename = ["应用1", "应用2", "应用3", "应用4", "应用5"];
  var valdata = [702, 350, 610, 793, 664];
  var myColor = ["#AD2D3A", "#FFD439", "#F8DA24", "#65C3DC", "#58ECEE"];
  option = {
    //图标位置
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },
    xAxis: {
      show: false
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#fff",

          rich: {
            lg: {
              backgroundColor: "#339911",
              color: "#fff",
              borderRadius: 15,
              // padding: 5,
              align: "center",
              width: 15,
              height: 15
            }
          }
        }
      },
      {
        show: false,
        inverse: false,
        data: valdata,
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: data,
        barCategoryGap: 50,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 20,
            color: function(params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: "inside",
            formatter: "{c}%"
          }
        }
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        barCategoryGap: 50,
        data: [100, 100, 100, 100, 100],
        barWidth: 15,
        itemStyle: {
          normal: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
          }
        }
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();

// 点位分布统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie1  .chart"));
  // 2. 指定配置项和数据
  var option = {
    legend: {
      top: "90%",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "70%"],
        center: ["50%", "42%"],
        roseType: "radius",
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "深圳" },
          { value: 42, name: "广东" }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 10,
          // 连接到文字的线长度
          length2: 10
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();
